<template>
  <div class="layout">
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="68px"
      >
        <el-form-item label="标题">
          <el-input
            v-model="formInline.bannerTitle"
            placeholder="请输入轮播图标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="formInline.isRelease" placeholder="发布状态">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="GenTable"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdat"
            >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col>

        <el-button icon="el-icon-search" circle class="search" @click="onSubmit"></el-button>
        <el-button icon="el-icon-refresh" circle class="refresh"  @click="onReset"></el-button>
      </el-row>
    </div>
    <div class="wrapper">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="bannerTitle" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="bannerUrl" label="轮播图" align="center">
          <template  slot-scope="scope">
            <el-image :src="baseUrl +scope.row.bannerUrl" ></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="link" label="跳转链接" align="center">
        </el-table-column>
        <el-table-column prop="bannerSort" label="排序" align="center">
        </el-table-column>
        <el-table-column prop="Publish" label="是否发布" align="center">
          <template v-slot="scope1">
            <el-row
              ><el-button type="success">{{
                scope1.row.isRelease == 1 ? "是" : "否"
              }}</el-button></el-row
            >
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form v-model="eidtForm">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input
              v-model="eidtForm.bannerTitle"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="轮播图" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              :action="baseUrl+'/common/upload'"
              :headers="headers"
              :show-file-list="false"
              :on-success='aaa'
            > 

              <div class="el-upload__text"><i v-if="!eidtForm.bannerUrl" class="el-icon-upload"></i>
              <img v-else :src="baseUrl + eidtForm.bannerUrl" alt=""></div>
            </el-upload>
          </el-form-item>
          <el-form-item label="跳转链接" :label-width="formLabelWidth">
            <el-input v-model="eidtForm.link" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input-number
              v-model="eidtForm.bannerSort"
              controls-position="right"
              @change="handleChange"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="是否发布" :label-width="formLabelWidth">
            <el-radio-group v-model="eidtForm.isRelease">
              <el-radio  v-model="eidtForm.isRelease" label="1">已发布</el-radio>
              <el-radio  v-model="eidtForm.isRelease" label="0">未发布</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="eidtForm.remark"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="dialogSubmit('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRotation, addRotation,updateRotation,delRotation} from "../../../api/api/api";
// import { fileAdd } from "../../../api/api/file";
import {getToken} from '../../../utils/auth'
import "highlight.js/styles/github-gist.css";
import ItemVue from '../../../layout/components/Sidebar/Item.vue';
export default {
  name: "homePage",

  created() {
    this.getUserList();
    //  this.addUser()
  },
  data() {
    return {
      title:'',
      //排序
      num: 1,
      //备注
      textarea: "",
      loading: false,
      upd:false,
      shuju:"",
      //图片
      baseUrl:process.env.VUE_APP_BASE_API,
      headers:{
        Authorization:'Bearer ' +getToken()
      },
      formInline: {
        bannerTitle: null,
        isRelease: null,
      },
      eidtForm: {
        bannerTitle: "",
        bannerUrl: "",
        bannerSort: "",
        link: "",
        isRelease: "",
        remark: "",
      }, //弹窗
      dialogFormVisible: false,

      formLabelWidth: "120px",
      tableData: [
        {
          bannerId: "",
          bannerTitle: null,
          bannerUrl: "",
          bannerSort: "",
          link: "",
          isRelease: "",
          remark: "",
        },
      ],
      multipleSelection :[]
    };
  },

  methods: {
    //查询
    getUserList() {
      this.loading = true;
      getRotation(this.formInline).then((res) => {
        console.log(res.rows);
        this.tableData = res.rows;
        this.loading = false;
      });
    },
    //添加
    addUser() {
      addRotation(this.eidtForm).then((res) => {
        this.getUserList()
      });
    },
    //删除
    delUser(ids){
      console.log(ids);
      delRotation(ids).then((res)=>{
        this.getUserList()
      })
    },
    //修改
    updateUsr(){
      updateRotation(this.eidtForm).then((res)=>{
       
        

      })
    },

    //查询
    onSubmit() {
      this.getUserList();
    },
    // onSubmit() {
    //   console.log("submit!", this.formInline);
    //   const filterPersons = this.tableData.filter(
    //     (formInline) =>
    //       formInline.tip == this.formInline.tip ||
    //       formInline.release == this.formInline.release
    //   );
    //   this.tableData = filterPersons;
    //   // this.getUserList()
    // },
    //重置
    onReset() {
      (this.formInline = {
        bannerTitle: null,
        isRelease: null,
      }),
        this.getUserList();
    },
    //图片调用
    aaa(response,file,fileList) {
      this.eidtForm.bannerUrl = response.fileName
        console.log(response, file, fileList);
    },
    //表单添加
    dialogSubmit(row) {
      if(this.upd==true){
        let ddd=0
        console.log("ggg",this.multipleSelection);
           if(this.multipleSelection.length > 0){
              //  ddd = this.multipleSelection
              //  console.log('dws',this.shuju);
              //  this.eidtForm = this.shuju;
              //  console.log("djewhfjew",this.eidtForm);
             
           }else{
              if(row){
                ddd = row.bannerId
              }
           }
        this.updateUsr(ddd)
        
        console.log('aa');
      }else{
         this.addUser();
         console.log('wwww');
      }
      this.eidtForm= {
        bannerTitle: "",
        bannerUrl: "",
        bannerSort: "",
        link: "",
        isRelease: "",
        remark: "",
      }
      this.dialogFormVisible = false;
    },

    resetForm(formName) {
      this.dialogFormVisible = false;
      // this.$refs[formName].resetFields();
    },
    //修改
    handleUpdate(row) {
      console.log('EE',row);
      this.dialogFormVisible = true;
      this.eidtForm = row;
      // this.eidtForm = this.shuju;
      this.upd=true;
      this.title="修改轮播图信息"
      
    },
    handleUpdat() {
      this.dialogFormVisible = true;
      this.eidtForm = this.shuju;
      this.upd=true;
      this.title="修改轮播图信息"
      
    },
    //删除

    handleDelete(row) {
      console.log(row);
      //弹窗
      this.$confirm("是否删除轮播图信息?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let ids;
           if(this.multipleSelection.length){
               ids = this.multipleSelection
           }else{
              if(row){
                ids = row.bannerId
              }
           }
          this.delUser(ids)
          // this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // if(confirmButtonText == true){
      //     this.tableData.splice(index, 1);
      // }
    },
    //新增
    GenTable() {
      this.dialogFormVisible = true;
            this.title="新增轮播图信息"

      //  const student = this.eidtForm
      // this.tableData.push(student);
      // this.tableData.push({ ...this.eidtForm });
    },
    //排序
    handleChange(value) {
      console.log("de", value);
    },
    //多选
     handleSelectionChange(val=[]) {
       console.log(val);
      this.shuju = val[0]
    this.multipleSelection = []
       val.forEach(item=>this.multipleSelection.push(item.bannerId))
      //  console.log(this.multipleSelection);
      }
  },
  
};

</script>

<style scoped>
.headtop {
  width: 200px;
  background: #666;
  position: fixed;
  top: 0;
  bottom: 0;
}
.comtant {
  margin-left: 200px;
}
.layout {
  margin-top: 20px;
}
.el-button--success.is-plain {
  margin-left: 10px;
}
.el-button--primary.is-plain {
  margin-left: 20px;
}
.el-button--danger.is-plain {
  margin-left: 10px;
}
::v-deep .el-form-item__label {
  font-weight: 700px;
}
.el-button.is-circle {
  padding: 7px;
}
.refresh {
  margin-left: 10px;
}
.search {
  margin-left: 960px;
}
.el-upload-dragger {

}
.el-upload__text{
    height: 100px;
    width: 100px;
    border: solid 1px black;
}
.el-upload__text img{
    height: 100px;
    width: 100px;
    border: solid 1px black;
}
::v-deep .el-image__inner{
  width:15px !important;

}

</style>